<template>
  <div class="sendOrders">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <div v-if="$route.path.indexOf('anewdeliveryList') !== -1" class="send_order_message">
        <el-card class="box-card">
          <div class="send_order_dirver_title">已派单信息</div>
          <table border="1" cellspacing="0" cellpadding="5" bordercolor="#ccc">
            <tr class="table_header">
              <td>司机</td>
              <td>手机号</td>
              <td>额定载重</td>
              <td>车牌号</td>
              <td>是否自由车</td>
              <td>车辆所有人</td>
            </tr>
            <!-- 下列表格用v-for循环 -->
            <tr v-for="item in alreadySendOrdersTable" :key="item.userId">
              <td>{{ item.name }}</td>
              <td>{{ item.mobile }}</td>
              <td>{{ item.ratedLoad }}</td>
              <td>{{ item.licenseNo }}</td>
              <td>{{ item.isSelfCar === 'true' ? '是': '否' }}</td>
              <td>{{ item.owner }}</td>
            </tr>
          </table>
        </el-card>
      </div>
      <el-tab-pane label="派给司机" name="dirver">
        <el-card class="box-card">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <div class="send_order_dirver_div">
              <div class="send_order_dirver_title">派单类型</div>
              <div class="radio_send">
                <el-radio v-model="dirverRadio" :disabled="dirverDisabledShow" label="1">按单价进行派单</el-radio>
                <el-radio v-model="dirverRadio" :disabled="dirverDisabledShow" label="2">按不同款项进行派单</el-radio>
              </div>

              <div v-if="dirverRadio === '2'">
                <el-form-item label="预付款">
                  <el-input v-model="formInline.advanceMoney" placeholder="预付款" />
                </el-form-item>
                <el-form-item label="尾款">
                  <el-input v-model="formInline.tailMoney" placeholder="尾款" />
                </el-form-item>
                <el-form-item label="回单款">
                  <el-input v-model="formInline.receiptMoney" placeholder="回单款" />
                </el-form-item>
                <el-form-item label="油卡">
                  <el-input v-model="formInline.oilMoney" placeholder="油卡" />
                </el-form-item>
                <el-form-item label="ETC">
                  <el-input v-model="formInline.etcMoney" placeholder="ETC" />
                </el-form-item>
                <span class="gross_freight">
                  总运费:
                  <i>{{ grossFreight }}</i> (总运费=预付款+尾款+回单付+油卡+ETC)
                </span>
              </div>
            </div>
            <div class="select_order_dirver_div">
              <div class="send_order_dirver_title">选择司机</div>
              <div class="select_driver_Btn">
                <el-button type="primary" @click="changeDriverTypeShow('driver')">选择司机</el-button>
                <span class="annotation">
                  <div>注：</div>
                  <div>1、自有车不支持开票</div>
                  <div>2、若需派单给没有维护到司机管理的司机以及车辆，需进行搜索查询方可进行展示</div>
                </span>
              </div>
              <table v-if="drierTable.length !== 0" border="1" cellspacing="0" cellpadding="5" bordercolor="#ccc" style="margin-top: 20px;">
                <tr class="table_header">
                  <td>司机</td>
                  <td>手机号</td>
                  <td>车牌号</td>
                  <td v-if="dirverRadio === '1'"><i>*</i>派单重量</td>
                  <td v-if="dirverRadio === '1'"><i>*</i>单价</td>
                  <td v-if="dirverRadio === '1'">预计运费</td>
                  <td>是否开票</td>
                  <td>操作</td>
                </tr>
                <!-- 下列表格用v-for循环 -->
                <tr v-for="(item,index) in drierTable" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.mobile }}</td>
                  <td>{{ item.licenseNo }}</td>
                  <td v-if="dirverRadio === '1'">
                    <el-input v-model="item.sendWeight" placeholder="" @blur="changeSendWeight(index,item)" />
                  </td>
                  <td v-if="dirverRadio === '1'">
                    <el-input v-model="item.price" placeholder="" @blur="changePrice(index,item)" />
                  </td>
                  <td v-if="dirverRadio === '1'">{{ item.predictFreight || 0 }}</td>
                  <td>
                    <el-checkbox v-model="item.needInvoice" :disabled="item.isSelfCar === 'true'" />
                  </td>
                  <td>
                    <span>
                      <el-button type="text" @click="detailTable('drierTable',index)">删除</el-button>
                    </span>
                  </td>
                </tr>
              </table>
            </div>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="派给车队长" name="car">
        <el-card class="box-card">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <div class="send_order_dirver_div">
              <div class="send_order_dirver_title">派单类型</div>
              <div class="radio_send">
                <el-radio v-model="carRadio" :disabled="carDisabledShow" label="1">按单价进行派单</el-radio>
                <el-radio v-model="carRadio" :disabled="carDisabledShow" label="2">按不同款项进行派单</el-radio>
              </div>
              <div v-if="carRadio === '2'">
                <el-form-item label="预付款">
                  <el-input v-model="formInline.advanceMoney" placeholder="预付款" />
                </el-form-item>
                <el-form-item label="尾款">
                  <el-input v-model="formInline.tailMoney" placeholder="尾款" />
                </el-form-item>
                <el-form-item label="回单款">
                  <el-input v-model="formInline.receiptMoney" placeholder="回单款" />
                </el-form-item>
                <el-form-item label="油卡">
                  <el-input v-model="formInline.oilMoney" placeholder="油卡" />
                </el-form-item>
                <el-form-item label="ETC">
                  <el-input v-model="formInline.etcMoney" placeholder="ETC" />
                </el-form-item>
                <span class="gross_freight">
                  总运费:
                  <i>{{ grossFreight }}</i> (总运费=预付款+尾款+回单付+油卡+ETC)
                </span>
              </div>
            </div>
            <div class="select_order_dirver_div">
              <div class="send_order_dirver_title">选择车队长</div>
              <div class="select_driver_Btn">
                <el-button type="primary" @click="changeDriverTypeShow('car')">选择车队长</el-button>
              </div>
            </div>
            <table v-if="carMasterTable.length !== 0" border="1" cellspacing="0" cellpadding="5" bordercolor="#ccc" style="margin-top: 20px;">
              <tr class="table_header">
                <td>车队长</td>
                <td>手机号</td>
                <td>车队名</td>
                <td v-if="carRadio === '1'"><i>*</i>派单重量</td>
                <td v-if="carRadio === '1'"><i>*</i>单价</td>
                <td v-if="carRadio === '1'">预计运费</td>
                <td>操作</td>
              </tr>
              <!-- 下列表格用v-for循环 -->
              <tr v-for="(item,index) in carMasterTable" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.mobile }}</td>
                <td>{{ item.motorcadeName }}</td>
                <td v-if="carRadio === '1'">
                  <el-input v-model="item.sendWeight" placeholder="" @blur="changeCarSendWeight(index,item)" />
                </td>
                <td v-if="carRadio === '1'">
                  <el-input v-model="item.price" placeholder="" @blur="changeCarPrice(index,item)" />
                </td>
                <td v-if="carRadio === '1'">{{ item.predictFreight || 0 }}</td>
                <td>
                  <span>
                    <el-button type="text" @click="detailTable('carMasterTable',index)">删除</el-button>
                  </span>
                </td>
              </tr>
            </table>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 司机 -->
    <el-dialog title="" :visible.sync="driverTableShow">
      <div class="seleect_driver_table">
        <div>
          <el-form :inline="true" :model="listQuery" class="demo-form-inline">
            <el-form-item label="司机">
              <el-input v-model="listQuery.name" placeholder="司机" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="listQuery.mobile" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="车牌号">
              <el-input v-model="listQuery.licenseNo" placeholder="车牌号" />
            </el-form-item>
            <el-form-item label="是否自有车">
              <el-select v-model="listQuery.isSelfCar" placeholder="请选择">
                <el-option label="是" value="true" />
                <el-option label="否" value="false" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getRelevancyCarList('driver')">查询</el-button>
            </el-form-item>
            <el-table
              ref="selectTable"
              :data="driverTableData"
              tooltip-effect="dark"
              style="width: 100%;"
              @select-all="driverSelectAll"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="30"
                :selectable="dirverSelectable"
              />
              <el-table-column label="司机" prop="name" align="center" />
              <el-table-column label="手机号码" prop="mobile" align="center" />
              <el-table-column label="额定载重" prop="name" align="center" />
              <el-table-column label="车牌号" prop="licenseNo" align="center" />
              <el-table-column label="是否自有车" prop="isSelfCar" align="center">
                <template slot-scope="{row}">
                  {{ row.isSelfCar === 'true'?'是':'否' }}
                </template>
              </el-table-column>
              <el-table-column label="车辆所有人" prop="owner" align="center" />
              <el-table-column label="操作" align="center" width="120">
                <template slot-scope="{row}">
                  <span v-if="row.relationType === 'COMPANY_DRIVER_CAR'">已添加</span>
                  <el-button v-else type="text" @click="addDriverList(row.relationId)">添加到司机列表</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          :current-page="pager.current"
          :page-sizes="pager.sizes"
          :page-size="pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="changeDriverTableSize"
          @current-change="changeDriverTableCurrent"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="driverTableShow = false">取 消</el-button>
        <el-button type="primary" @click="driverTableBtn()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 车队长 -->
    <el-dialog title="" :visible.sync="carTableShow">
      <div class="seleect_driver_table">
        <div>
          <el-form :inline="true" :model="listQuery" class="demo-form-inline">
            <el-form-item label="车队长">
              <el-input v-model="listQuery.name" placeholder="车队长" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="listQuery.mobile" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="车队名">
              <el-input v-model="listQuery.motorcadeName" placeholder="车队名" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getRelevancyCarList('car')">查询</el-button>
            </el-form-item>
            <el-table
              ref="selectTable"
              :data="carMasterTableData"
              tooltip-effect="dark"
              style="width: 100%;"
              @select-all="carSelectAll"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="30"
                :selectable="carSelectable"
              />
              <el-table-column label="车队长" prop="name" align="center" />
              <el-table-column label="手机号码" prop="mobile" align="center" />
              <el-table-column label="车队名" prop="motorcadeName" align="center" />
              <el-table-column label="操作" prop="name" align="center" width="120">
                <template slot-scope="{row}">
                  <span v-if="row.relationType === 'COMPANY_DRIVER_MASTER'">已添加</span>
                  <el-button v-else type="text" @click="addCarMasterList(row.id)">添加到车队长列表</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          :current-page="pager.current"
          :page-sizes="pager.sizes"
          :page-size="pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="changeCarTableSize"
          @current-change="changeCarTableCurrent"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="carTableShow = false">取 消</el-button>
        <el-button type="primary" @click="carTableBtn()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="agreement_Btn">
      <div>
        <div class="agreement_text">
          <el-checkbox v-model="checked">阅读并同意</el-checkbox>
          <el-button type="text">《授权协议》</el-button>
          <el-button type="text">《托运合同协议》</el-button>
        </div>
        <div class="defineBtn">
          <el-button @click="$router.go(-1)">取消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="define">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDriverAndCarList } from '@/api/tms/driver'
import { gethadSendDriver, gethadSendCar, postSendOrder, postReSendOrder, postAddDriverList, postAddCarMasterList } from '@/api/tms/order'
import { driverMasterList } from '@/api/tms/driverMaster'
export default {
  name: 'SendOrders',
  data() {
    return {
      orderNo: '',
      btnLoading: false,
      activeName: 'dirver',
      driverTableShow: false,
      carTableShow: false,
      checked: false,
      carRadio: '1',
      dirverRadio: '2',
      formInline: {
        advanceMoney: '',
        tailMoney: '',
        receiptMoney: '',
        oilMoney: '',
        etcMoney: ''
      },
      driverTableData: [],
      carMasterTableData: [],
      multipleSelection: [],
      alreadySendOrdersTable: [],
      alreadyDrierTable: [],
      alreadyCarTable: [],
      oId: null,
      listQuery: {},
      pager: {
        total: 0,
        sizes: [10, 20, 30],
        size: 10,
        current: 1
      },
      selectionList: [],
      drierTable: [],
      carMasterTable: [],
      dirverDisabledShow: false,
      carDisabledShow: false
    }
  },
  computed: {
    grossFreight: function() {
      let num = 0
      for (const key in this.formInline) {
        num += Number(this.formInline[key])
      }
      return num
    }
  },
  watch: {
    'carRadio'(newValue, oldValue) {
      if (newValue !== oldValue) { this.carMasterTable = [] }
    },
    'dirverRadio'(newValue, oldValue) {
      if (newValue !== oldValue) { this.drierTable = [] }
    }
  },
  created() {
    this.oId = this.$route.query.id
  },
  async mounted() {
    if (this.$route.path.indexOf('anewdeliveryList') !== -1) {
      const driverRes = await gethadSendDriver(this.oId)
      console.log(driverRes)
      this.alreadyDrierTable = driverRes
      this.alreadySendOrdersTable = driverRes
      const catRes = await gethadSendCar(this.oId)
      this.alreadyCarTable = catRes
      if (driverRes.length !== 0) {
        this.dirverDisabledShow = true
        if (driverRes[0].settlementType === 'UNIT_PRICE') {
          this.dirverRadio = '1'
        } else {
          this.dirverRadio = '2'
        }
      }
      if (catRes.length !== 0) {
        this.carDisabledShow = true
        if (catRes[0].settlementType === 'UNIT_PRICE') {
          this.carRadio = '1'
        } else {
          this.carRadio = '2'
        }
      }
    }
  },
  methods: {
    async addDriverList(relationId) {
      try {
        await postAddDriverList(relationId)
        this.$message.success('添加成功')
        this.getRelevancyCarList('driver')
      } catch {
        console.log()
      }
    },
    async addCarMasterList(id) {
      try {
        await postAddCarMasterList(id)
        this.$message.success('添加成功')
        this.getRelevancyCarList('car')
      } catch {
        console.log()
      }
    },
    detailTable(key, index) {
      this[key].splice(index, 1)
    },
    driverSelectAll() {
      if (this.dirverRadio === '2') {
        this.$refs.selectTable.clearSelection()
        this.$message.warning('当前不可多选')
      }
    },
    carSelectAll() {
      if (this.carRadio === '2') {
        this.$refs.selectTable.clearSelection()
        this.$message.warning('当前不可多选')
      }
    },
    dirverSelectable(row, index) {
      if (this.dirverRadio === '2' && this.selectionList.length !== 0) {
        if (this.activeName === 'dirver') {
          if (row.id === this.selectionList[0].id) {
            return true
          } else {
            return false
          }
        } else if (this.activeName === 'car') {
          if (row.id === this.selectionList[0].id) {
            return true
          } else {
            return false
          }
        }
      } else {
        return true
      }
    },
    carSelectable(row, index) {
      if (this.carRadio === '2' && this.selectionList.length !== 0) {
        if (this.activeName === 'dirver') {
          if (row.id === this.selectionList[0].id) {
            return true
          } else {
            return false
          }
        } else if (this.activeName === 'car') {
          if (row.id === this.selectionList[0].id) {
            return true
          } else {
            return false
          }
        }
      } else {
        return true
      }
    },
    handleClick(tab, event) {
      this.formInline = {
        advanceMoney: '',
        tailMoney: '',
        receiptMoney: '',
        oilMoney: '',
        etcMoney: ''
      }
      this.listQuery = {}
      if (this.activeName === 'dirver') {
        this.alreadySendOrdersTable = this.alreadyDrierTable
      } else if (this.activeName === 'car') {
        this.alreadySendOrdersTable = this.alreadyCarTable
      }
    },
    changeSendWeight(index, item) {
      console.log()
      if (item.sendWeight > this.$route.query.weight) {
        this.$message.warning('填写重量不能大于运单总重量')
        this.drierTable[index].sendWeight = 0
      }
      item.predictFreight = Number(this.drierTable[index].sendWeight || 0) * Number(this.drierTable[index].price || 0)
      this.$set(this.drierTable, index, item)
    },
    changePrice(index, item) {
      item.predictFreight = Number(this.drierTable[index].sendWeight || 0) * Number(this.drierTable[index].price || 0)
      this.$set(this.drierTable, index, item)
    },
    changeCarSendWeight(index, item) {
      item.predictFreight = Number(this.carMasterTable[index].sendWeight || 0) * Number(this.carMasterTable[index].price || 0)
      this.$set(this.carMasterTable, index, item)
    },
    changeCarPrice(index, item) {
      item.predictFreight = Number(this.carMasterTable[index].sendWeight || 0) * Number(this.carMasterTable[index].price || 0)
      this.$set(this.carMasterTable, index, item)
    },

    driverTableBtn() {
      this.drierTable = this.selectionList
      this.driverTableShow = false
    },
    carTableBtn() {
      this.carMasterTable = this.selectionList
      this.carTableShow = false
    },
    async define() {
      this.btnLoading = true
      const data = {}
      data.orderNo = this.oId
      if (this.activeName === 'dirver') {
        if (this.drierTable.length === 0) {
          this.$message.warning('请选择司机')
          this.btnLoading = false
          return
        }
        data.sendModel = 'DRIVER'
        const driver = []
        if (this.dirverRadio === '2') {
          const obj = {}
          for (const key in this.formInline) {
            obj[key] = this.formInline[key]
          }
          obj.totalMoney = this.grossFreight
          obj.driverName = this.drierTable[0].name
          obj.carrierNo = this.drierTable[0].licenseNo
          obj.driverPhone = this.drierTable[0].mobile
          obj.needInvoice = this.drierTable[0].needInvoice ? 'YES' : 'NO'
          obj.driverUserId = this.drierTable[0].userId
          obj.carrierWeight = this.drierTable[0].sendWeight
          obj.priceMoney = this.drierTable[0].price
          driver.push(obj)
        } else if (this.dirverRadio === '1') {
          try {
            this.drierTable.forEach((item, index) => {
              if (item.sendWeight === undefined || item.price === undefined) throw item
              const obj = {}
              obj.driverName = item.name
              obj.carrierNo = item.licenseNo
              obj.driverPhone = item.mobile
              obj.needInvoice = item.needInvoice ? 'YES' : 'NO'
              obj.driverUserId = item.userId
              obj.carrierWeight = item.sendWeight
              obj.priceMoney = item.price
              obj.tailMoney = 0
              driver.push(obj)
            })
          } catch (e) {
            this.btnLoading = false
            if (e.sendWeight === undefined && e.price === undefined) {
              return this.$message.warning('请填写派单重量和单价')
            } else if (e.sendWeight === undefined) {
              return this.$message.warning('请填写派单重量')
            } else if (e.price === undefined) {
              return this.$message.warning('请填写单价')
            }
          }
        }
        if (!this.checked) {
          this.$message({
            message: '请勾选协议',
            duration: 1000,
            forbidClick: true
          })
          this.btnLoading = false
          return false
        }
        data.drivers = driver
        if (this.$route.path.indexOf('anewdeliveryList') === -1) {
          try {
            await postSendOrder(data)
            this.$message.success('派单成功')
            this.btnLoading = false
            this.$router.go(-1)
          } catch {
            this.btnLoading = false
            console.log()
          }
        } else {
          try {
            await postReSendOrder(data)
            this.$message.success('重新派单成功')
            this.btnLoading = false
            this.$router.go(-1)
          } catch {
            this.btnLoading = false
            console.log()
          }
        }
      } else if (this.activeName === 'car') {
        data.sendModel = 'FLEET'
        if (this.carMasterTable.length === 0) {
          this.$message.warning('请选择车队长')
          this.btnLoading = false
          return
        }
        const fleets = []
        if (this.carRadio === '2') {
          const obj = {}
          for (const key in this.formInline) {
            obj[key] = this.formInline[key]
          }
          obj.totalMoney = this.grossFreight
          obj.fleetUserId = this.carMasterTable[0].userId
          obj.fleet = this.carMasterTable[0].name
          obj.fleetName = this.carMasterTable[0].motorcadeName
          obj.fleetPhone = this.carMasterTable[0].mobile
          obj.needInvoice = 'NO'
          obj.carrierWeight = this.carMasterTable[0].sendWeight
          obj.priceMoney = this.carMasterTable[0].price
          fleets.push(obj)
        } else if (this.carRadio === '1') {
          try {
            this.carMasterTable.forEach((item, index) => {
              if (item.sendWeight === undefined || item.price === undefined) throw item
              const obj = {}
              obj.fleetUserId = item.userId
              obj.fleet = item.name
              obj.fleetName = item.motorcadeName
              obj.fleetPhone = item.mobile
              obj.needInvoice = 'NO'
              obj.carrierWeight = item.sendWeight
              obj.priceMoney = item.price
              obj.tailMoney = 0
              fleets.push(obj)
            })
          } catch (e) {
            this.btnLoading = false
            if (e.sendWeight === undefined && e.price === undefined) {
              return this.$message.warning('请填写派单重量和单价')
            } else if (e.sendWeight === undefined) {
              return this.$message.warning('请填写派单重量')
            } else if (e.price === undefined) {
              return this.$message.warning('请填写单价')
            }
          }
        }
        if (!this.checked) {
          this.$message({
            message: '请勾选协议',
            duration: 1000,
            forbidClick: true
          })
          this.btnLoading = false
          return false
        }
        data.fleets = fleets
        if (this.$route.path.indexOf('anewdeliveryList') === -1) {
          try {
            await postSendOrder(data)
            this.btnLoading = false
            this.$message.success('派单成功')
            this.$router.go(-1)
          } catch {
            this.btnLoading = false
            console.log()
          }
        } else {
          try {
            await postReSendOrder(data)
            this.btnLoading = false
            this.$message.success('重新派单成功')
          } catch {
            this.btnLoading = false
            console.log()
          }
        }
      }
    },
    handleSelectionChange(e) {
      this.selectionList = e
    },
    async changeDriverTypeShow(val) {
      await this.getRelevancyCarList(val)
      if (val === 'driver') {
        this.driverTableShow = true
      } else if (val === 'car') {
        this.carTableShow = true
      }
    },
    // 获取关联车辆
    async getRelevancyCarList(val) {
      if (val === 'driver') {
        const data = {
          ...this.listQuery,
          size: this.pager.size,
          current: this.pager.current,
          isViewAll: 'true'
        }
        const { records, total } = await getDriverAndCarList(data)
        // this.driverTableData = records
        this.driverTableData = records
        this.pager.total = total
      } else if (val === 'car') {
        const data = {
          ...this.listQuery,
          size: this.pager.size,
          current: this.pager.current,
          isViewAll: 'true'
        }
        const { records, total } = await driverMasterList(data)
        this.carMasterTableData = records
        this.pager.total = total
      }
    },
    changeDriverTableSize(val) {
      this.pager.size = val
      this.pager.current = 1
      this.getRelevancyCarList('driver')
    },
    changeDriverTableCurrent(val) {
      this.pager.current = val
      this.getRelevancyCarList('driver')
    },
    changeCarTableSize(val) {
      this.pager.size = val
      this.pager.current = 1
      this.getRelevancyCarList('car')
    },
    changeCarTableCurrent(val) {
      this.pager.current = val
      this.getRelevancyCarList('car')
    }
  }
}
</script>
<style lang="scss">
.sendOrders {
  padding: 20px 15px;
  .send_order_dirver_title {
    border-left: 4px solid #199ed8;
    padding: 4px 4px;
    font-weight: 700;
  }
  .text {
    font-size: 14px;
  }
  .send_order_message {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .box-card {
      width: 98%;
      table {
        margin-top: 10px;
      }
      td {
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .table_header {
        background-color: #f2f2f2;
        td {
          text-align: center;
          font-weight: 700;
          color: #6b6b6c;
        }
      }
    }
  }

  .item {
    padding: 18px 0;
  }
  .el-tabs {
    .el-tabs__content {
      .el-tab-pane {
        display: flex;
        justify-content: center;
        .box-card {
          width: 98%;
          .send_order_dirver_div {
            margin-bottom: 20px;

            .radio_send {
              margin-top: 10px;
            }
            .el-form {
              width: 40%;
            }
            .gross_freight {
              height: 36px;
              line-height: 36px;
              i {
                color: red;
                font-weight: 700;
              }
            }
          }
          .select_order_dirver_div {
            .select_driver_Btn {
              margin-top: 20px;
              padding-left: 15px;
              .annotation {
                display: inline-block;
                font-size: 12px;
                margin-left: 10px;
                vertical-align: top;
              }
            }
            .seleect_driver_table {
              margin-top: 30px;
            }
          }
        }
      }
    }
  }
  //弹窗样式修改
  .el-dialog__wrapper{
    margin-bottom: 20px;
    .el-dialog{
      width: 85%;
      .el-dialog__header{
        span{
          font-weight: 700;
        }
      }
      .el-dialog__footer{
        text-align: center;
      }
    }
  }
  .agreement_Btn {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    .agreement_text {
      .el-checkbox__inner {
        border-color: black;
      }
    }
    .defineBtn {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
